<template>
  <div class="search">
    <van-nav-bar title="搜索" left-arrow @click-left="onClickLeft" />
    <van-search
      v-model="value"
      shape="round"
      background
      clearable
      placeholder="请输入搜索关键词"
      @update:model-value="searchHandle"
      @search="searchHandle"
    />
    <div class="loading-warp" v-if="spinVisible">
      <van-loading vertical />
    </div>
    <div class="content" v-else>
      <div class="result-list">
        <div class="result-item" v-for="item in bookData" :key="item.id">
          <BookItem :bookData="item"></BookItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SearchBook } from "../../api/index";
import BookItem from "../../layout/module/home/module/bookRow.vue";
import { computed, reactive, ref, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  components: {
    BookItem,
  },
  name: "search",
  setup() {
    const value = ref("");
    const spinVisible = ref(false);

    const route = useRoute();
    const router = useRouter();
    const bookData = ref([]);
    const getData = async (title) => {
      spinVisible.value = true;
      const r = await SearchBook(title);
      bookData.value = r.data;
      spinVisible.value = false;
    };
    const onClickLeft = () => {
      router.go(-1);
    };
    if (route.params.flag) {
      console.log(route.params.flag, "我是判定条件");
      console.log(route.params, "我是判定条件");
      getData(" ");
    }
    const searchHandle = (value) => {
      getData(value);
    };
    return {
      value,
      searchHandle,
      bookData,
      onClickLeft,
      spinVisible,
    };
  },
};
</script>
<style scoped lang="scss">
.result-list {
  padding: 12px;
}
.loading-warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 100px);
}
</style>
